<template>
  <div class="zhishi">
    <div class="details">学情雷达-知识</div>
    <div class="Score-increase-zhishi">
      <div class="echatys-zhishi">
        <!-- 雷达图3 -->
        <Leida1 :klScoreLev="klScoreLev" />
      </div>
      <div class="echatys-rig-zhishi">
        <div class="nulecenter">
          <!-- <div class="nulecenter-text">
          预测第一提分空间 <span class="nulecenter-span"> 52</span> 分
        </div> -->
          <div class="nulecenter-body">
            知识(具有事实、概念或程序性质的有组织信息体，是教学中传授与传承的内容):根据受测学生的分项知识点的达标情况可以分析出，学生学到了哪些知识点?薄弱的知识点是哪些?
            <br />
            <span class="nulecenter-span">关注哪些知识没有得到正确积累 </span>
          </div>
        </div>
      </div>
    </div>

    <div class="tablelisttop">
      <table class="custom-table" :style="{ 'border-collapse': 'collapse' }">

        <thead>
          <tr>
            <th class="th-dimension" style="border: 1px solid #e8e8e8; padding: 8px;" rowspan="2">维度</th>
            <th colspan="3" style="border: 1px solid #e8e8e8; padding: 8px;">得分率（%）</th>
            <th class="th-feature" style="border: 1px solid #e8e8e8; padding: 8px; position: sticky; right: 0;"
              rowspan="2">特点</th>
          </tr>
          <tr>
            <th style="border: 1px solid #e8e8e8; padding: 8px;">本人</th>
            <th style="border: 1px solid #e8e8e8; padding: 8px;">群体</th>
            <th style="border: 1px solid #e8e8e8; padding: 8px;">差值</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in tableData" :key="item.KlName">
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.KlName }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.Score }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.TotalScore }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.birthday }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px; position: sticky; right: 0;"
              :style="{ color: getColor(item.namelist) }">
              {{ item.namelist }}
            </td>
          </tr>
        </tbody>
      </table>

      <div class="table-text">长短板：学生在知识、技能、能力各分项指标中得分率较高的为长板，得分率较低的为短板。</div>
      <div class="table-text">优劣势：学生在知识、技能、能力各分项指标中得分率高于群体（常模）为优势，低于群体（常模）为劣势。</div>


    </div>
  </div>
</template>
<script lang="ts" setup>
import Leida1 from "./echarts/leida1.vue";
import { reactive, onMounted, ref } from "vue";

// 定义 klScoreLev 中 indicatorname 数组元素的类型
// interface IndicatorNameItem {
// name: string;
// }
// // 定义 klScoreLev 的类型
// interface KlScoreLevType {
// indicatorname: IndicatorNameItem[];
// all: number[];
// mine: number[];
// }
// 定义 props 类型
const props = defineProps<{
  klScoreLev: [];
}>();
const getColor = (text: any) => {
  if (text.includes('长处') || text.includes('优势')) {
    return 'green';
  } else if (text.includes('短板') || text.includes('劣势')) {
    return '#FF9851';
  }
  return 'black';
};
const columns = [
  {
    title: "维度",
    dataIndex: "KlName",
  },
  {
    title: "得分率（%）",
    children: [
      {
        title: "本人",

        dataIndex: "Score",
      },
      {
        title: "群体",
        dataIndex: "TotalScore",
      },
      {
        title: "差值",
        dataIndex: "birthday",
      },
    ],
  },
  {
    title: "特点",
    dataIndex: "namelist",
    fixed: "right",
  },
];


const klScoreArr = ref<number[]>([]);

if (props.klScoreLev) {
  props.klScoreLev.map((item, index) => {
    // klScoreArr.push( (item.Score/item.TotalScore)*10000)
    klScoreArr.value.push(
      Math.round((Number(item.Score) / Number(item.TotalScore)) * 10000)
    );
  });
}

let klScoreMin = Math.min(...klScoreArr.value);
let klScoreMax = Math.max(...klScoreArr.value);
// 处理数据，计算差值
const tableData = ref(
  props.klScoreLev.map((item: any) => {
    return {
      ...item,

      Score: ((item.Score / item.TotalScore) * 100).toFixed(2).replace(/\.?0+$/, ''),
      TotalScore: ((item.Avg * 100) / item.TotalScore).toFixed(2).replace(/\.?0+$/, ''),
      birthday: (((item.Score / item.TotalScore) * 100) - ((item.Avg * 100) / item.TotalScore)).toFixed(2),
      namelist: `${Math.round((item.Score / item.TotalScore) * 10000) <= klScoreMin
          ? "短板"
          : Math.round((item.Score / item.TotalScore) * 10000) >= klScoreMax
            ? "长板"
            : ""
        }  ${Math.round((item.Score / item.TotalScore) * 100) -
          Math.round((item.Avg / item.TotalScore) * 100) >
          0
          ? Math.round((item.Score / item.TotalScore) * 10000) <=
            klScoreMin ||
            Math.round((item.Score / item.TotalScore) * 10000) >= klScoreMax
            ? " + 优势"
            : "优势"
          : Math.round((item.Score / item.TotalScore) * 10000) <=
            klScoreMin ||
            Math.round((item.Score / item.TotalScore) * 10000) >= klScoreMax
            ? " + 劣势"
            : "劣势"
        }      
      `,
    };
  })
);

// for (var a in props.klScoreLev) {
//   klScoreArr.value.push(Math.round((props.klScoreLev[a]["Score"] / props.klScoreLev[a]["TotalScore"]) * 10000));
// }

const klScoreLev = reactive({
  indicatorname: [],
  all: [],
  mine: [],
});

props.klScoreLev.map((item: any) => {
  klScoreLev.indicatorname.push({ name: item.KlName });
  klScoreLev.all.push(((item.Score / item.TotalScore) * 100).toFixed(2).replace(/\.?0+$/, ''));
  klScoreLev.mine.push(((item.Avg * 100) / item.TotalScore).toFixed(2).replace(/\.?0+$/, ''));
});

onMounted(() => {

});
</script>
<style lang="less" scoped>
.details {
  font-weight: 500;
  font-size: 17px;
  color: #03305c;
  text-decoration: underline;
  text-decoration-color: #0075ff;
}

// .details::after {
//     width: 100px;
//   content: "";
//   position: absolute;
//   left: 50%;
//   right: 0;
//   bottom: -3px;
//   height: 7px; /* 下划线的高度，可根据需要调整 */
//   background: linear-gradient(rgba(255, 255, 255, 0) 0%, #0075ff 100%);
//   /* 上下渐变效果，这里设置上半部分为指定颜色，下半部分透明 */
// }
.tablelisttop {
  margin-top: 1vw;
  background-color: #fff !important;
}

.custom-table {
  width: 100%;
  margin-top: 16px;
  font-family: 'Arial', sans-serif;
}

.table-text {
  margin-top: 1vw;
  font-size: 13px;
  text-align: left;
  background-color: #fff;
}

.Score-increase-zhishi {
  margin-top: 1vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.echatys-zhishi {
  width: 50%;
  height: 60vh;
  border: 1px solid #ededed;

  img {
    width: 100%;
    height: 100%;
  }
}

.echatys-rig-zhishi {
  width: 49%;
  //   background-color: pink;
  text-align: left;
}

.nulecenter {
  margin: 25% 15% 0 15%;
}

.nulecenter-text {
  width: 15vw;
  font-weight: 500;
  font-size: 1.3vw;
  color: #03305c;
  text-align: left;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.nulecenter-body {
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
  background-color: #fff;
}

.nulecenter-span {
  color: #fb6d30;
  //   font-size: 1.8vw;
}

@media (max-width: 735px) {
  .echatys-zhishi {
    width: 100%;
    height: 60vh;
    border: 1px solid #ededed;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .echatys-rig-zhishi {
    width: 100%;
    //   background-color: pink;
    text-align: left;
  }
}
</style>
